<template>
  <div class="keyboard">
    <button v-for="i in 9" @click="emits('input', i)">
      {{ i }}
    </button>
    <button @click="emits('delete')">&larr;</button>
    <button @click="emits('input', 0)">0</button>
    <button @click="emits('ok')">OK</button>
  </div>

</template>

<script setup lang="ts">
const emits = defineEmits<{
  (e: 'input', num: number): void,
  (e: 'delete'): void,
  (e: 'ok'): void
}>()


window.addEventListener('keyup', (e) => {
  if (e.key === 'Enter') emits('ok')
  if (e.key === 'Backspace') emits('delete')
  if (Number(e.key)) emits('input', Number(e.key))
})


</script>

<style scoped lang='scss'>
.keyboard {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 210px;

  button {
    border: none;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    font-size: 1.4em;
    padding: 0;
    background-color: #0D98BA;
    color: #fff;
    margin: 5px;
    width: 60px;
    height: 50px;
    text-align: center;
  }

  button:hover {
    opacity: 0.6;
  }
}
</style>